<template>
  <l-layout
    class="l-tab-page learun-file-form-page"
    :rightMove="false"
    :right="284"
  >
    <template #right>
      <l-panel style="padding: 0; border-radius: 0">
        <div class="l-auto-window">
          <el-tabs v-model="configActiveName" :stretch="true">
            <el-tab-pane :label="`${$t('文件属性')}`" name="tab01">
              <div class="l-rblock" style="padding: 16px 16px 0">
                <div class="learun-des-item">
                  <div class="learun-des-item-label">{{ $t('文件类型') }}</div>
                  <div class="learun-des-item-content">
                    {{ lr_getFileEex(file.name) }}
                  </div>
                </div>
                <div class="learun-des-item">
                  <div class="learun-des-item-label">{{ $t('文件大小') }}</div>
                  <div class="learun-des-item-content">
                    {{ $countFileSize(file.size) }}
                  </div>
                </div>
                <div class="learun-des-item">
                  <div class="learun-des-item-label">{{ $t('所在位置') }}</div>
                  <div class="learun-des-item-content">
                    {{ file.level || level }}
                  </div>
                </div>
                <div class="learun-des-item">
                  <div class="learun-des-item-label">{{ $t('创建者') }}</div>
                  <div class="learun-des-item-content">
                    {{ file.createUserName }}
                  </div>
                </div>
                <div class="learun-des-item">
                  <div class="learun-des-item-label">{{ $t('创建时间') }}</div>
                  <div class="learun-des-item-content">
                    {{ lr_dateFormat(file.createDate) }}
                  </div>
                </div>
                <div class="learun-des-item">
                  <div class="learun-des-item-label">{{ $t('修改时间') }}</div>
                  <div class="learun-des-item-content">
                    {{ lr_dateFormat(file.modifyDate) }}
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('文件版本')" name="tab02">
              <div class="l-rblock">
                <div class="learun-list time">
                  <div
                    :key="item.f_Id"
                    v-for="item in historys"
                    :class="[
                      'learun-list-item',
                      { active: item.f_Id == selectId },
                    ]"
                    style="border: 0"
                    @click="handleClick(item)"
                  >
                    <div class="learun-list-item-wraper">
                      <div class="learun-list-item-icon">
                        <div class="ver">V{{ item.f_Ver }}</div>
                      </div>
                      <div class="learun-list-item-content">
                        <div class="learun-list-item-title">
                          {{ item.f_Name }}
                        </div>
                        <div class="learun-list-item-des">
                          {{ item.f_CreateUserName }} ·
                          {{ lr_dateFormat(item.f_CreateDate) }}
                        </div>
                      </div>
                      <div v-if="isDown" >
                        <el-dropdown @command="handleCommand">
                          <span class="el-dropdown-link">
                            <i class="el-icon-more"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{ item, type: 'down' }"
                              >{{ $t('下载文件') }}</el-dropdown-item
                            >
                            <!--<el-dropdown-item  :command="{item,type:'update'}"  >回滚至此版本</el-dropdown-item>-->
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </l-panel>
    </template>
    <template v-if="selectId">
      <div
        class="l-rblock"
        style="background: #fff"
        v-if="
          ['xls', 'xlsx','doc', 'docx', 'txt', 'csv', 'html', 'pdf'].includes(
            lr_getFileEex(selectFile.f_Name)
          )
        "
      >
        <iframe
          :src="previewUrl"
          class="l-iframe"
          ref="iframe"
          frameborder="0"
        ></iframe>
      </div>
      <div
        class="l-rblock learun-img-preview"
        v-else-if="
          ['jpg', 'gif', 'png', 'bmp', 'jpeg', 'svg'].includes(
            lr_getFileEex(selectFile.f_Name)
          )
        "
      >
        <img class="learun-img-preview-img" :src="previewUrl" alt="" />
      </div>
      <div class="l-rblock learun-not-preview" v-else>
        <i
          class="icon"
          :class="lr_getFileIcon(selectFile.f_Name).icon"
          :style="{ color: lr_getFileIcon(selectFile.f_Name).color }"
        ></i>
        <p class="text">
          {{ $t('很抱歉，无法在浏览器预览') }}
          {{ lr_getFileEex(selectFile.f_Name) }} {{ $t('文件,请下载后查看') }}
        </p>
        <el-button @click="downFile(selectFile)" class="btn" type="primary">{{
          $t("下载文件")
        }}</el-button>
      </div>
    </template>
  </l-layout>
</template>
<script>
const api = window.$api.system.file;
export default {
  props: {
    file: {
      type: Object,
      default: () => {},
    },
    level: String,
  },
  data() {
    return {
      configActiveName: "tab01",
      historys: [],
      selectId: "",
    };
  },
  watch: {
    fileId: {
      handler() {
        this.selectId = "";
        this.configActiveName = "tab01";
        this.formData();
      },
      immediate: true,
    },
  },
  computed: {
    fileId() {
      if (this.file) {
        return this.file.id;
      } else {
        return "";
      }
    },
    selectFile() {
      if (this.selectId == "") {
        return null;
      }
      return this.historys.find((t) => t.f_Id == this.selectId);
    },
    previewUrl() {
      if (this.selectId == "") {
        return "";
      }
      return `${this.apiUrl}system/annexesfile/preview/${this.selectFile.f_FileId}?token=${this.token}`;
    },
    isDown() {
      if (this.lr_isSystem || this.file.authType.indexOf("3") != -1) {
        return true;
      }
      return false;
    },
  },
  methods: {
    async formData() {
      if (this.fileId) {
        var res = await this.$awaitWraper(api.get(this.fileId));
        if (res) {
          const list = res.historyList;
          if (list.length > 0 && list[0].f_FileInfoId == this.fileId) {
            this.historys = list;
            this.selectId = this.historys[0].f_Id;
          }
        }
      }
    },
    handleClick(item) {
      this.selectId = item.f_Id;
    },
    handleCommand(command) {
      if (command.type == "down") {
        this.$downFile(
          `${this.apiUrl}system/annexesfile/${command.item.f_FileId}?token=${this.token}`
        );
      }
    },
    downFile(item) {
      this.$downFile(
        `${this.apiUrl}system/annexesfile/${item.f_FileId}?token=${this.token}`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.learun-list-item-icon {
  height: 56px;
}
.ver {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  line-height: 24px;
  border-radius: 100%;
  background: #c5cedb;
  border: 2px solid #fff;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.learun-list-item-wraper {
  min-height: 56px;
}
.time {
  .learun-list-item-icon:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 28px;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2px;
    opacity: 0.04;
    background: #000;
  }
  .learun-list-item-icon:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 28px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2px;
    opacity: 0.04;
    background: #000;
  }

  .learun-list-item:first-child {
    .learun-list-item-icon:before {
      display: none;
    }
  }
  .learun-list-item:last-child {
    .learun-list-item-icon:after {
      display: none;
    }
  }
}

.learun-list-item.active {
  background-color: #4285f414;
  .ver {
    background: #4285f4;
  }
  .learun-list-item-title {
    color: #4285f4;
  }
}

.learun-img-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  &-img {
    opacity: 1;
    transition: all 0.2s ease-in-out;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 5%), 0 0 1px 0 rgb(0 0 0 / 5%);
    background: url()
      repeat;
  }
}
.learun-not-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .icon {
    font-size: 64px;
    margin-bottom: 16px;
  }
  .text {
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    margin-bottom: 16px;
  }
}
</style>
<style lang="scss">
.learun-file-form-page {
  .el-upload-dragger {
    width: 264px;
    height: 80px;

    .el-icon-upload {
      font-size: 48px;
      line-height: 48px;
      margin: 0;
    }
  }

  .el-dropdown-link {
    height: 24px;
    width: 24px;
    line-height: 24px;
    text-align: center;
  }
}
</style>